<template>
  <view class="rf-recharge">
    <!--  提现金额  -->
    <view class="rf-recharge__money">
      <view class="font-lg mb-base"> 申请提现:</view>
          <view>
			  <input
			    v-model="state.inputAmount"
			    type="number"
				placeholder="请输入提现金额"
			    @input="handleInputAmountChange"
			  >
		  </view>
    </view>
	<!-- 我的余额   -->
	<view class="pl-lg acmoney">
	  <view class="font-sm font-color-light">
	    可提现金额：
	    <text :class="'text-' + themeColor.name" >{{
	      state.userInfo?.member?.account?.user_money || "0"
	    }}
	    </text>
	    元
		
	  </view>
	</view>
    <view class="rf-recharge__pay-btn mt-lg">
      <button :class="'bg-' + themeColor.name" class="btn font-base" @tap="pay(state.inputAmount)">
        立即提现 
      </button>
     
    </view>
    <!--加载动画-->
    <rf-loading :active="state.loading" />
  </view>
</template>
<script lang="ts" setup>
import {onLoad,} from "@dcloudio/uni-app";
import mHelper from "@/utils/helper";
import mSiteConfig from "@/config/site";
import mRouteConfig from "@/config/routes"; // 路由管理
import mRouter from "@/utils/routerUtil";
import mPayment from "@/utils/payment";
import memberApi from "@/api/tinyShop/member";
import {Route,} from "@/response/route";
import {Profile,} from "@/response/profile";
import {Account,} from "@/response/profile";
import {paymentConfig, RechargeConfigItem,} from "@/response/payment";
import {PlatformGroupEnum,} from "@/enum/loginEnum";
import {reactive} from "vue";

// 常量
const themeColor = mHelper.getThemeColor();
const globalConfig = mHelper.getGlobalConfig(); // 通用配置


// 变量
let state = reactive({
  userInfo: {} as Profile,
  code: "",
  loading: true,
  inputAmount: "",
  // inputAmountGive: 0
});

onLoad((options: any) => {
  if (mHelper.platformGroupFilter() === PlatformGroupEnum.TINYSHOPWECHATMP) {
    state.code =
      (options.code &&
        options.code.split(",")[options.code.split(",").length - 1]) ||
      "";
    if (!state.code) {
      uni.setStorageSync("params", options);
      const href = window.location.href;
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${mSiteConfig.wxAppId}&redirect_uri=${href}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
    }
  }
  options = {...uni.getStorageSync("params"), ...options,};
  initData(options);
});
// 提现金额输入框判断
const handleInputAmountChange = (e) => {
  state.inputAmount = Number(e.detail.value);
  
 // if( state.inputAmount > Number(state.account.user_money)){
	//  state.inputAmount= = Number(state.account.user_money);
	//  return;
 // }
};

const pay = (content: number) => {
	alert(content);
  // if (!globalConfig.order_ali_pay && !globalConfig.order_wechat_pay) return;
  // let config = {} as paymentConfig;
  // config.data = JSON.stringify({money: state.inputAmount,});
  // config.route = mRouteConfig.account;
  // config.code = state.code;
  // await mPayment.commonPay(config);
};

// 初始化数据
const initData = async (options) => {
  // if (
  //   mHelper.platformGroupFilter() === PlatformGroupEnum.TINYSHOPWECHATMP &&
  //   uni.getSystemInfoSync().platform === "android"
  // ) {
  //   await mPayment.wxConfigH5(window.location.href);
  // }
  state.code = options.code;
  try {
    await getMemberInfo();
    state.loading = false;
  } catch (e) {
    //
    state.loading = false;
  }
};

// 获取用户信息
const getMemberInfo = async () => {
  try {
    state.userInfo = (await memberApi.getMemberInfo()) as unknown as Profile;
  } catch (e) {
    //
  }
};


</script>
<style lang="scss">
	.acmoney{margin-top: $spacing-base;}
.rf-recharge {
  background-color: $color-white;
  padding: $spacing-lg 0;

  &__money {
    padding: 0 $spacing-base;

    .amount-list {
      display: flex;
      justify-content: space-between;
      align-content: space-around;
      align-items: center;
      flex-wrap: wrap;

      &::after {
        content: '';
        width: 220rpx;
        height: 145rpx;
        margin-bottom: $spacing-base;
      }

      .amount-item {
        width: 220rpx;
        height: 145rpx;
        margin-bottom: $spacing-base;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0rpx 5rpx 20rpx rgba(0, 0, 0, 0.05);

        &.on {
          background-color: #e1e1e1;
          color: #666;
        }
      }
    }

    .input {
      width: 28.2vw;
      border-bottom: solid 2rpx;
      justify-content: flex-end;
      align-items: center;

      input {
        margin: 0 20rpx;
        height: 60rpx;
        font-size: 30rpx;
        justify-content: flex-end;
        align-items: center;
      }
    }

    .num {
      margin-top: 10rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .text {
        padding-right: 10rpx;
        font-size: 30rpx;
      }

      .give {
        font-size: $font-sm;
      }
    }
  }

  &__pay-btn {
    padding: 0 $spacing-lg;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    .btn {
      width: 650rpx;
      height: 80rpx;
      border-radius: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.2);
    }
  }
}
</style>
